<template>
  <div id="commentInfo" v-if="Object.keys(commemtInfo).length !== 0">
    <!-- 评论头部模块 -->
    <div class="comment-head">
      <span>用户评价</span>
      <span>更多<strong>&gt;</strong></span>
    </div>
    <!-- 评论信息 -->
    <div class="comment-info">
      <!-- 用户信息 -->
      <div class="user-info">
        <span class="user-logo">
          <img :src="commemtInfo.list[0].user.avatar" />
        </span>
        <span>{{ commemtInfo.list[0].user.uname }}</span>
      </div>
      <!-- 用户评论 -->
      <div class="user-essay">
        {{ commemtInfo.list[0].content }}
      </div>
      <!-- 评论时间等其它细节 -->
      <div class="other-info">
        <span>{{ getData }}</span>
        <span class="style">{{ commemtInfo.list[0].style }}</span>
      </div>

      
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailCommentInfo",
  props: {
    commemtInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    getData() {
      // console.log(this.commemtInfo);
      //输入时间
      var date = new Date(this.commemtInfo.list[0].created * 1000);
      return (
        date.getFullYear() +
        "年" +
        date.getMonth() +
        "月" +
        date.getDate() +
        "号" +
        "\t" +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds()
      );
    },
  },
};
</script>

<style scoped>
#commentInfo {
  border-bottom: 5px solid #f7f7f7;
}
.comment-head {
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
span > strong {
  padding-left: 8px;
}
.comment-info {
  padding: 15px 10px;
}
.user-logo {
  display: inline-block;
  width: 50px;
  vertical-align: middle;
  margin-right: 10px;
}
.user-logo img {
  width: 100%;
  border-radius: 50%;
}
/* 用户评论 */
.user-essay {
  font-size: 13px;
  padding: 10px 5px;
  color: #777;
}
/* 评论细节 */
.other-info {
  font-size: 11px;
  color: #999;
  padding: 0 5px;
}
.style {
  margin-left: 10px;
}
</style>